import { useAppDispatch, useAppSelector } from "@/store/hooks";
import {
  changeCreate,
  changeParams,
  getGearListAsync,
} from "@/store/withdrawGear/withdrawGearSlice";
import { Button, Card, Select, Space } from "antd";
import { isEqual } from "lodash-es";
import type { ReactElement } from "react";

export default function Filter(): ReactElement<typeof Card, "div"> {
  const { config: { data: { data: { user_channel_list = [], wd_country_conf = [], wd_way_conf = [] } = {} } = {} } = {} } = useAppSelector(
    (state) => state.app
  );
  const { params, table } = useAppSelector((state) => state.withdrawGear);
  const dispatch = useAppDispatch();
  return (
    <Card>
      <Space
        wrap
        size="large"
        className="w-full flex justify-between"
        classNames={{ item: "last:ml-auto" }}
      >
        <label>
          <span>渠道：</span>
          <Select value={params.channel} onChange={(channel) => {
            dispatch(changeParams({channel}))
          }} className="min-w-[120px]" options={[{label: '全部', value: ''}, ...user_channel_list]} />
        </label>
        <label>
          <span>地区：</span>
          <Select value={params.country} onChange={(country) => {
            dispatch(changeParams({country}))
          }} className="min-w-[120px]" options={[{label: '全部', value: ''}, ...wd_country_conf]} />
        </label>
        <label>
          <span>提现平台：</span>
          <Select value={params.wd_way} onChange={(wd_way) => {
            dispatch(changeParams({wd_way}))
          }} className="min-w-[120px]" options={[{label: '全部', value: ''}, ...wd_way_conf]} />
        </label>
        <Button.Group>
          <Button type="primary" ghost onClick={() => {
            dispatch(changeCreate({type: 'create', open: true}))
          }}>
            创建
          </Button>
          <Button
            loading={table.status === "loading"}
            type="primary"
            onClick={(): void => {
              if (isEqual(params, table?.params)) {
                dispatch(getGearListAsync({...params}));
              } else {
                const newParams = {
                  ...params,
                  page: 1,
                };
                dispatch(changeParams(newParams));
                dispatch(getGearListAsync(newParams));
              }
            }}
          >
            查询
          </Button>
        </Button.Group>
      </Space>
    </Card>
  );
}
